<template>
    <Center>
        <div class="p-8" style="height: 100%;">
            <div class=" flex justify-between">
                <el-space>
                    <el-select style="width:70px;" value-key="id" placeholder="风格">
                        <el-option v-for="(item, index) in styleList" :key="index"  :label="item.name" :value="item.name"   @click="styleChange(item)"/>
                    </el-select>
                    <!-- <el-select style="width:80px;" value-key="id" placeholder="BPM">
                        <el-option key="a" label="BPM" value="BPM" />
                    </el-select> -->
                    <el-select style="width:70px;" value-key="id" placeholder="标签">
                        <el-option v-for="(item, index) in tagList" :key="index"  :label="item.name" :value="item.name"  @click="tagChange(item)"/>
                    </el-select>
                    <el-select style="width:70px;" value-key="id" placeholder="场景">
                        <el-option v-for="(item, index) in scenesList" :key="index"  :label="item.name" :value="item.name"  @click="scenesChange(item)"/>
                    </el-select>
                    <el-select style="width:70px;" value-key="id" placeholder="情绪">
                        <el-option v-for="(item, index) in feelList" :key="index"  :label="item.name" :value="item.name"  @click="feelChange(item)"/>
                    </el-select>
                    <!-- <el-select style="width:70px;" value-key="id" placeholder="时间">
                        <el-option key="a" label="时间" value="时间" />
                    </el-select> -->
                </el-space>
                <el-select style="width:140px;" value-key="id" placeholder="排序方式">
                    <el-option key="a" label="排序方式" value="排序方式" />
                </el-select>
            </div>
            <div class="flex items-center mt-3 text-sm text-gray-500">
                <el-space>
                    每页显示
                    <el-radio-group v-model="radio1">
                        <el-radio-button label="20" />
                        <el-radio-button label="50" />
                        <el-radio-button label="100" />
                        <el-radio-button label="150" />
                    </el-radio-group>
                </el-space>
            </div>
            <div class="flex items-center mt-3 text-sm text-gray-500">
                <el-space>
                    已选标签
                    <el-tag v-for="tag in tags" :key="tag.name" class="mx-1" closable :type="tag.type" @close="handleClose(tag)">
                        {{ tag.name }}
                    </el-tag>
                </el-space>
            </div>
            <el-table class="mt-4" :data="tableData" stripe style="width: 100%" @row-click="onClick">
                <el-table-column prop="index" label="序号"  />
                <el-table-column prop="title" label="歌名" />
                <el-table-column prop="bpm" label="BPM" />
                <el-table-column prop="duration" label="时长" />
                <el-table-column prop="auther" label="发布者" />
                <el-table-column prop="price" label="售价" />
                <el-table-column prop="caozuo" label="操作" width="180" />
            </el-table>
            <!-- <div class="mt-4 flex justify-center">
                <el-pagination layout="prev, pager, next" :total="50" />
            </div> -->
        </div>

    </Center>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import test from "@/assets/imgs/1.webp";
import Center from '../../components/common/Center.vue'
import { styleIndex,tagIndex,scenesIndex,feelIndex,albumInfo,musicInfo } from "@/http/api";
import { useRouter } from 'vue-router';
import { extractIdentifiers } from "@vue/compiler-core";
import { add , list} from '@/components/common/music';   
const { currentRoute } = useRouter();
const route = currentRoute.value;
const baseUrl = import.meta.env.VITE_API_URL;
const styleList =  ref([]);
const tagList =  ref([]);
const scenesList =  ref([]);
const feelList = ref([]);
onMounted(() => {   
    let albumId = route.query.id;  
    getStyle();
    getTagList();
    getScenes();
    getFeel();
    getMusic({id:albumId});
    
});

const getFeel = async () => {
    const { data } = await feelIndex();
    feelList.value = data.feel;
}
const getScenes = async () => {
    const { data } = await scenesIndex();
    scenesList.value = data.scenes;
}
const getTagList = async () => {
    const { data } = await styleIndex();
    styleList.value = data.style;
}
const getStyle = async () => {
    const { data } = await tagIndex();
    tagList.value = data.tag;
};

const tags = ref([]);


const styleChange = async (e) => {   
    tags.value.push({'name':e.name,'type':'danger'})
    //查询当前数据
    let albumId = route.query.id; 
    getTagMusic({id:albumId,style:e.id,tag:'',scenes:'',feel:''}); 
}
const tagChange = async (e) => {    
    tags.value.push({'name':e.name,'type':'danger'})    
    let albumId = route.query.id; 
    getTagMusic({id:albumId,style:e.id,tag:e.id,scenes:'',feel:''}); 
}
const scenesChange = async (e) => {    
    tags.value.push({'name':e.name,'type':'danger'}) 
    let albumId = route.query.id; 
    getTagMusic({id:albumId,style:'',tag:'',scenes:e.id,feel:''});    
}
const feelChange = async (e) => {    
    tags.value.push({'name':e.name,'type':'danger'}) 
    let albumId = route.query.id; 
    getTagMusic({id:albumId,style:'',tag:'',scenes:'',feel:e.id});    
}

const getTagMusic = async (e) => {      
    const { data } = await albumInfo({
        id:e.id,
        style:e.style,
        tag:e.tag,
        scenes:e.scenes,
        feel:e.feel,
    });
    tableData.value = [];
    list.value = [];
    data.album.list.forEach((item, index) => {
        tableData.value.push({
            index:index+1,
            id:item.id,
            title:item.title,
            bpm:item.user.name,
            duration:item.duration,
            auther:item.user.name,
            price:"￥"+item.price,
            caozuo:''
        });

        list.value.push({
            name:item.title,
            author:item.user?.name,
            url:baseUrl +item.audio,
            image:baseUrl +item.image,
        })
    });
}

const onClick = async (row)=>{
    console.log(row)
    getMusicInfo(row)
}
const getMusicInfo = async (e) => {
    const { data } = await musicInfo({
        id:e.id
    });

    const music_list = {name:data.music.title,author:data.music.user?.name,url:baseUrl +data.music.audio,image:baseUrl + data.music.image};
    console.log("123",music_list);
    add(music_list)
}

const handleClose = async (tag) => {
    tags.value.splice(tags.value.indexOf(tag), 1)
}
const tableData = ref([    
]);

const getMusic = async (e) => { 
    const { data } = await albumInfo({
        id:e.id,
    });
    list.value = [];
    data.album.list.forEach((item, index) => {
        tableData.value.push({
            index:index+1,
            id:item.id,
            title:item.title,
            bpm:item.user.name,
            duration:item.duration,
            auther:item.user.name,
            price:"￥"+item.price,
            caozuo:''
        });

        list.value.push({
            name:item.title,
            author:item.user?.name,
            url:baseUrl +item.audio,
            image:baseUrl +item.image,
        })

    });

    console.log("后",list)
}

</script>
<style scoped>
.center-text {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>